<template>
	<view class="partner-join__form-three e-p-40">
		<!--  店铺名称 -->
		<view class="e-m-b-30">
			<view class="e-m-b-20">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.dpmc') }}</text>
			</view>
			<input class="partner-join__form-three__input" v-model="form.name" :placeholder="$t('store.qsrdpmc')" placeholder-class="e-font-28 c-secondary" />
		</view>
		<!-- 店铺头像 -->
		<view class="e-m-b-30">
			<view class="e-m-b-8">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.店铺头像') }}</text>
			</view>
			<view class="e-m-b-20 c-secondary e-font-20">
				{{ $t('store.joinTips') }}
			</view>
			<formUpdate :max="1" :count="1" width="178rpx" height="132rpx" @change="(val) => (form.logo = val)" />
		</view>
		<!--  执照类型 -->
		<view class="e-m-b-30">
			<view class="e-m-b-20">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.zzlx') }}</text>
			</view>
			<view class="partner-join__form-three__input e-flex e-flex-between" @tap="show = true">
				<text :class="[licenseType ? 'c-33' : 'c-secondary']">{{ licenseType || $t('store.qxzzzlx') }}</text>
				<image src="../../static/arrow.png" class="img-36"></image>
			</view>
		</view>
		<!--  营业执照 -->
		<view class="e-m-b-30">
			<view class="e-m-b-8">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.yyzz') }}</text>
			</view>
			<view class="e-m-b-20 c-secondary e-font-20">
				{{ $t('store.joinTips') }}
			</view>
			<formUpdate :max="3" :count="3" width="178rpx" height="132rpx" @change="(val) => (form.licenseImgs = val)" />
		</view>
		<!--  组织机构代码 -->
		<view class="e-m-b-30">
			<view class="e-m-b-20">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.zzjgdm') }}</text>
			</view>
			<input class="partner-join__form-three__input" v-model="form.creditCode" :placeholder="$t('store.qsrzzjgdm')" placeholder-class="e-font-28 c-secondary" />
		</view>
		<!--  营业执照地址 -->
		<view class="e-m-b-30">
			<view class="e-m-b-20">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.yyzzdz') }}</text>
			</view>
			<view class="partner-join__form-three__input e-flex e-flex-between" @tap="addressShow = true">
				<text :class="[addressText ? 'c-33' : 'c-secondary']">{{ addressText || $t('user.所在地区') }}</text>
				<image src="../../static/arrow.png" class="img-36"></image>
			</view>
		</view>
		<!--  营业执照详细地址 -->
		<view class="e-m-b-30">
			<view class="e-m-b-20">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.yyzzxxdz') }}</text>
			</view>
			<view class="partner-join__form-three__input e-flex e-flex-between" @tap="handleOpenLocation">
				<text :class="[form.licenseAddrDetail ? 'c-33' : 'c-secondary']">{{ form.licenseAddrDetail || $t('store.qsryyzzxxdz') }}</text>
				<image src="../../static/arrow.png" class="img-36"></image>
			</view>
			<!-- <input class="partner-join__form-three__input" v-model="form.licenseAddrDetail"
				:placeholder="$t('store.qsryyzzxxdz')" placeholder-class="e-font-28 c-secondary" /> -->
		</view>
		<template v-if="type === '2'">
			<!--   店铺门头照 -->
			<view class="e-m-b-30">
				<view class="e-m-b-8">
					<text class="c-red e-p-r-10">*</text>
					<text>{{ $t('store.dpmtz') }}</text>
				</view>
				<view class="e-m-b-20 c-secondary e-font-20">
					{{ $t('store.joinTips') }}
				</view>
				<formUpdate :count="3" width="178rpx" height="132rpx" @change="(val) => (form.realScenePhoto = val)" />
			</view>
			<!--   营业时间 -->
			<view class="e-m-b-30">
				<view class="e-m-b-20">
					<text class="c-red e-p-r-10">*</text>
					<text>{{ $t('store.yysj') }}</text>
				</view>
				<view class="partner-join__form-three__input partner-join__form-three__time e-flex e-flex-between">
					<text @tap="beginShow = true">{{ form.beginTime }}</text>
					<text>{{ $t('store.至') }}</text>
					<text @tap="endingShow = true">{{ form.endingTime }}</text>
				</view>
			</view>
		</template>

		<!--  法人姓名 -->
		<view class="e-m-b-30">
			<view class="e-m-b-20">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.frxm') }}</text>
			</view>
			<input class="partner-join__form-three__input" v-model="form.legalPrincipalName" :placeholder="$t('store.qsrfrxm')" placeholder-class="e-font-28 c-secondary" />
		</view>
		<!--  法人身份证号码 -->
		<view class="e-m-b-30">
			<view class="e-m-b-20">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.frsfzhm') }}</text>
			</view>
			<input class="partner-join__form-three__input" v-model="form.legalPrincipalIdcard" :placeholder="$t('store.qsrfrsfzhm')" placeholder-class="e-font-28 c-secondary" />
		</view>
		<!--  法人身份证照片 -->
		<view class="e-m-b-30">
			<view class="e-m-b-8">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.frsfzzp') }}</text>
			</view>
			<view class="e-m-b-20 c-secondary e-font-20">
				{{ $t('store.joinTips') }}
			</view>
			<formUpdate :max="2" :count="2" width="170rpx" height="108rpx" @change="(val) => (form.legalPrincipalIdcardImgs = val)" />
		</view>
		<!--  负责人姓名 -->
		<view class="e-m-b-30">
			<view class="e-m-b-20">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.fzrxm') }}</text>
			</view>
			<input class="partner-join__form-three__input" v-model="form.shopkeeperName" :placeholder="$t('store.qsrdzxm')" placeholder-class="e-font-28 c-secondary" />
		</view>
		<!--  负责人电话 -->
		<view class="e-m-b-30">
			<view class="e-m-b-20">
				<text class="c-red e-p-r-10">*</text>
				<text>{{ $t('store.fzrdh') }}</text>
			</view>
			<input class="partner-join__form-three__input" v-model="form.shopkeeperTelephone" :placeholder="$t('store.qsrdzdh')" placeholder-class="e-font-28 c-secondary" />
		</view>
		<!-- 推广人手机号 -->
		<view class="e-m-b-30">
			<view class="e-m-b-20">
				<text class="c-red e-p-r-10"></text>
				<text>{{ $t('store.推广人手机号') }}</text>
			</view>
			<input class="partner-join__form-three__input" v-model="form.parentPhone" :placeholder="$t('store.请输入推广人手机号')" placeholder-class="e-font-28 c-secondary" />
		</view>
		<view class="e-flex e-flex-items-start e-flex-wrap" @tap="isAgree = !isAgree">
			<radio style="transform: scale(0.8)" :checked="isAgree" :color="primary" />
			<view class="e-flex-1">
				<text>{{ $t('public.我已阅读并同意') }}</text>
				<text class="c-primary" @tap="$goTo('/pages/store/join/txt', { id: 'BusRegister' })">{{ $t('store.agreement') }}</text>
			</view>
		</view>
		<view class="partner-join__form-three__btn e-flex e-font-32 fw-500">
			<view class="c-primary" :style="[boxShadowColor]" @tap="$emit('back')">
				<text>{{ $t('store.syb') }}</text>
			</view>
			<view class="e-flex-1 bg-primary e-font-32 c-white e-flex-xy-center" :style="[boxShadowColor]" @tap="submit">
				<text>{{ $t('store.tjzl') }}</text>
			</view>
		</view>
		<e-picker
			keyName="name"
			:show="show"
			:columns="licenseTypes"
			:confirmColor="primary"
			:cancelText="$t('common.取消')"
			:confirmText="$t('common.确定')"
			@confirm="licenseTypeChange"
			@cancel="show = false"
		></e-picker>
		<global-address
					ref="globalAddressRef"
					v-model="addrIds"
					:primary="primary"
					:show="addressShow"
					@textChange="(val) => (addressText = val)"
					@close="addressShow = false"
				></global-address>
		<e-datetime-picker
			:show="beginShow"
			:value="form.beginTime"
			mode="time"
			:confirmColor="primary"
			:cancelText="$t('common.取消')"
			:confirmText="$t('common.确定')"
			@cancel="beginShow = false"
			@confirm="timeConfirm($event, 1)"
		></e-datetime-picker>
		<e-datetime-picker
			:show="endingShow"
			:value="form.endingTime"
			mode="time"
			:confirmColor="primary"
			:cancelText="$t('common.取消')"
			:confirmText="$t('common.确定')"
			@cancel="endingShow = false"
			@confirm="timeConfirm($event, 2)"
		></e-datetime-picker>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import formUpdate from './update.vue';
import { getLicensesList } from '@/common/request/api';
import type { AddressItem,LicensesItem, StoreExamineParams } from '@/common/request/api';
import { useCurrentInstance } from '@/common/hooks';

const props = defineProps({
	primary: {
		type: String,
		required: true
	},
	type: String
});
const emit = defineEmits(['submit']);

const ctx = useCurrentInstance();

const show = ref(false);
const beginShow = ref(false);
const endingShow = ref(false);
const licenseType = ref('');
const licenseTypes = ref<[LicensesItem[]]>([[]]);
const addressText = ref('');
const addrIds = ref<number[]>([]);
const addressShow = ref(false);

const form = ref<Omit<StoreExamineParams, 'type' | 'countryId' | 'industry'>>({
	name: '',
	licenseType: '',
	licenseImgs: [],
	logo: [],
	creditCode: '',
	licenseAddrProvince: '',
	licenseAddrCity: '',
	licenseAddrArea: '',
	licenseAddrTown: '',
	licenseAddrDetail: '',
	legalPrincipalName: '',
	legalPrincipalIdcard: '',
	legalPrincipalIdcardImgs: [],
	shopkeeperName: '',
	shopkeeperTelephone: '',
	parentPhone: '',
	realScenePhoto: [],
	beginTime: '08:00',
	endingTime: '22:00',
	locationLongitude: '',
	locationLatitude: ''
});

const isAgree = ref(false);
const boxShadowColor = computed(() => {
	return {
		boxShadow: `0 12rpx 24rpx 0 ${props.primary.replace('1)', '0.3')}`
	};
});


const globalAddressRef = ref();

const handleOpenLocation = async () => {
	try {
		// #ifdef APP||H5
		ctx.$goTo(
			'/pages/store/map',
			{},
			{
				updateSelectAddr: (data?:AddressItem) => {
					if (data) {
						form.value.licenseAddrDetail = data.vicinity;
						form.value.locationLongitude = data.location.lng;
						form.value.locationLatitude = data.location.lat;
					}
				}
			}
		);
		// #endif
		// #ifdef MP-WEIXIN||MP-ALIPAY
		uni.chooseLocation({
			success: function (res) {
				console.log('位置信息：' + res.longitude, res.latitude);
				form.value.licenseAddrDetail = res.address;
				form.value.locationLongitude = res.longitude;
				form.value.locationLatitude = res.latitude;
			},
			fail(e) {
				console.log(e, 'e1');
				ctx.$toastApp(e.errMsg);
			}
		});
		// #endif
	} catch (e) {
		console.log(e, 'e');
	}
};
const timeConfirm = (data: { value: string }, type: 1 | 2) => {
	if (type === 1) {
		form.value.beginTime = data.value;
		beginShow.value = false;
	} else {
		form.value.endingTime = data.value;
		endingShow.value = false;
	}
};
const licenseTypeChange = (e: { value: LicensesItem[] }) => {
	licenseType.value = e.value[0].name;
	form.value.licenseType = `${e.value[0].id}`;
	show.value = false;
};
const test = () => {
	if (!form.value.name) {
		ctx.$toastApp(ctx.$t('store.qsrdpmc'));
		return;
	}
	if (!form.value.licenseType) {
		ctx.$toastApp(ctx.$t('store.qxzzzlx'));
		return;
	}
	if (!form.value.licenseImgs.length) {
		ctx.$toastApp(ctx.$t('store.qscyyzz'));
		return;
	}
	if (!form.value.logo.length) {
		ctx.$toastApp('store.请上传店铺头像');
		return;
	}
	if (!form.value.creditCode) {
		ctx.$toastApp(ctx.$t('store.qsrzzjgdm'));
		return;
	}
	if (!addressText.value) {
		ctx.$toastApp(ctx.$t('store.qxzyyzzdz'));
		return;
	}
	if (!form.value.licenseAddrDetail) {
		ctx.$toastApp(ctx.$t('store.qsryyzzxxdz'));
		return;
	}
	if (props.type === '2') {
		if (!form.value.realScenePhoto.length) {
			ctx.$toastApp(ctx.$t('store.qscdpmtz'));
			return;
		}
	}

	if (!form.value.legalPrincipalName) {
		ctx.$toastApp(ctx.$t('store.qsrfrxm'));
		return;
	}
	if (!form.value.legalPrincipalIdcard) {
		ctx.$toastApp(ctx.$t('store.qsrfrsfzhm'));
		return;
	}
	if (!form.value.legalPrincipalIdcardImgs.length) {
		ctx.$toastApp(ctx.$t('store.qscfrsfzzp'));
		return;
	}
	if (!form.value.shopkeeperName) {
		ctx.$toastApp(ctx.$t('store.qsrdzxm'));
		return;
	}
	if (!form.value.shopkeeperTelephone) {
		ctx.$toastApp(ctx.$t('store.qsrdzdh'));
		return;
	}
	if (!isAgree.value) {
		ctx.$toastApp(ctx.$t('public.请先阅读并同意用户协议'));
		return;
	}
	return true;
};
const submit = async () => {
	if (test()) {
		form.value.licenseAddrProvince = addrIds.value[0];
		form.value.licenseAddrCity = addrIds.value[1];
		form.value.licenseAddrArea = addrIds.value[2];
		form.value.licenseAddrTown = addrIds.value[3] ? addrIds.value[3] : '';
		emit('submit', form.value);
	}
};

onMounted(() => {
	nextTick(() => {
		globalAddressRef.value.init();
	});
	getLicensesList().then((res) => {
		licenseTypes.value = [res.data];
	});
});
</script>

<style lang="scss" scoped>
.partner-join__form-three {
	&__input {
		height: 80rpx;
		border-radius: 8rpx;
		border: 2rpx solid #e2dfe2;
		padding: 20rpx;
	}

	&__btn {
		margin-top: 66rpx;

		> view {
			height: 100rpx;
			border-radius: 50rpx;

			&:first-child {
				padding: 28rpx 56rpx;
				margin-right: 30rpx;
				border: 2rpx solid var(--color-primary);
			}

			&:last-child {
			}
		}
	}

	&__time {
		padding: 20rpx 106rpx;
	}
}
</style>
